<template>
  <view class="container">
    <view class="form-section">
      <view class="form-item">
        <text class="form-label">姓名</text>
        <input 
          class="form-input" 
          type="text" 
          v-model="form.customerName" 
          placeholder="请输入姓名"
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">手机号</text>
        <input 
          class="form-input" 
          type="text" 
          v-model="form.phone" 
          placeholder="手机号码"
        />
        <text class="readonly-tip">手机号为登录凭证，修改后请使用新手机号登录</text>
      </view>
      
      <view class="form-item">
        <text class="form-label">客户类型</text>
        <radio-group @change="onTypeChange">
          <label class="radio-item" v-for="item in customerTypes" :key="item.value">
            <radio 
              :value="item.value" 
              :checked="form.type === item.value"
            />
            <text>{{ item.label }}</text>
          </label>
        </radio-group>
      </view>
      

      
      <view class="form-item">
        <text class="form-label">地址</text>
        <textarea 
          class="form-textarea" 
          v-model="form.address" 
          placeholder="地址"
        />
      </view>
    </view>
    
    <view class="button-group">
      <button class="save-btn" @tap="saveProfile">保存</button>
      <button class="cancel-btn" @tap="goBack">取消</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { updateCustomerInfoAPI } from '@/api/user.js'

const form = ref({
  id: '',
  customerName: '',
  phone: '',
  type: '普通客户', // 普通客户, 企事业用户

  address: ''
})

const customerTypes = [
  { label: '普通客户', value: '普通客户' },
  { label: '企事业用户', value: '企事业用户' }
]

onMounted(() => {
  // 获取当前用户信息
  const userInfo = uni.getStorageSync('userInfo') || {}
  form.value = {
    ...form.value,
    id: userInfo.id || '',
    customerName: userInfo.customerName || userInfo.name || '',
    phone: userInfo.phone || '',
    type: userInfo.type || '普通客户',

    address: userInfo.address || ''
  }
})

// 客户类型变化处理
const onTypeChange = (e) => {
  form.value.type = e.detail.value
}

// 保存个人信息
const saveProfile = async () => {
  if (!form.value.customerName) {
    uni.showToast({
      title: '请输入姓名',
      icon: 'none'
    })
    return
  }
  

  
  try {
    uni.showLoading({
      title: '保存中...'
    })
    
    const res = await updateCustomerInfoAPI(form.value)
    
    uni.hideLoading()
    
    if (res.success) {
      // 更新本地存储的用户信息
      const userInfo = uni.getStorageSync('userInfo') || {}
      const updatedUserInfo = {
        ...userInfo,
        ...form.value
      }
      uni.setStorageSync('userInfo', updatedUserInfo)
      
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      })
      
      // 返回上一页
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    } else {
      uni.showToast({
        title: res.message || '保存失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: '保存失败',
      icon: 'none'
    })
    console.error('保存个人信息失败:', error)
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

.form-section {
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.form-item {
  margin-bottom: 40rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  margin-bottom: 15rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 30rpx;
  box-sizing: border-box;
}

.form-input[disabled] {
  background-color: #f8f8f8;
  color: #999;
}

.readonly-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}

.form-textarea {
  width: 100%;
  min-height: 100rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 30rpx;
  box-sizing: border-box;
  resize: none;
}

.radio-group {
  display: flex;
  justify-content: space-between;
}

.radio-item {
  display: flex;
  align-items: center;
  font-size: 30rpx;
}

.radio-item radio {
  margin-right: 10rpx;
  transform: scale(0.8);
}

.button-group {
  display: flex;
  gap: 20rpx;
  padding: 20rpx 0;
}

.save-btn {
  flex: 1;
  background-color: #1677ff;
  color: white;
  border-radius: 10rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
}

.cancel-btn {
  flex: 1;
  background-color: white;
  color: #333;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
}
</style>